<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.w3.org/1999/xhtml">
<head>
    <th:block th:include="include :: header('主子表提交')"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <th:block th:include="include :: select2-css"/>
    <th:block th:include="include :: bootstrap-select-css"/>
</head>
<body class="gray-bg">
<div class="main-content">
    <form id="form-add" class="form-horizontal" th:object="${question}">
        <h4 class="form-header h4">项目管理</h4>
        <input id="questionId" name="questionId" type="hidden" th:value="*{id}"/>
        <input id="evaluateModuleType" name="evaluateModuleType" type="hidden" th:value="*{projectModule}"/>
        <div class="row">
            <div class="col-sm-3">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">测评类型：</label>
                    <div class="col-sm-6">
                        <input class="form-control" type="text" name="projectModule" id="projectModule" th:field="*{projectModule}" readonly="true">
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">排序：</label>
                    <div class="col-sm-6">
                        <input class="form-control" type="text" name="questionSort" id="questionSort" th:field="*{questionSort}" readonly="true">
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">题目分值：</label>
                    <div class="col-sm-6">
                        <select id="trainingScore" name="trainingScore" class="form-control" th:with="type=${@dict.getType('business_question_score')}">
                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="form-group">
                    <a class="btn btn-success" onclick="searchPre()">
                        <i class="fa fa-search"></i>&nbsp;搜索
                    </a>
                </div>
            </div>
        </div>

        <div>
            <div style="display: inline-block;margin-left: 46px">
                <label>题目：</label>
            </div>
            <div style="display: inline-block; margin-left: 55px">
                <input class="form-control" style="width: 1000px" type="text" name="question" id="question" th:field="*{question}" readonly="true">
            </div>

        </div>
        <h4 class="form-header h4"></h4>
        <div class="row">
            <div class="col-sm-12">
                <button type="button" class="btn btn-white btn-sm" onclick="addColumn()"><i class="fa fa-plus"> 增加</i></button>
                <button type="button" class="btn btn-white btn-sm" onclick="sub.delColumn()"><i class="fa fa-minus"> 删除</i></button>
                <div class="col-sm-12 select-table table-striped">
                    <table id="bootstrap-table"></table>
                </div>
            </div>
        </div>
    </form>
</div>

<div class="row">
    <div class="col-sm-offset-5 col-sm-10">
        <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>&nbsp;
        <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭</button>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<th:block th:include="include :: select2-js"/>
<th:block th:include="include :: bootstrap-select-js"/>
    <script th:src="@{/js/jquery.tmpl.js}"></script>
	<script th:inline="javascript">
        var evaluateModuleType = [[${@dict.getType('business_project_module')}]];
        var prefix = ctx + "education/trainingProgram";
	    $(function() {
	    	// 初始化数据, 可以由后台传过来
	    	// var data = [{"searchValue":null,"createBy":"","createTime":null,"updateBy":"","updateTime":null,"remark":null,"params":{},"id":1,"projectType":1,"projectModule":1,"evaluateModuleType":null,"questionId":1,"trainingScore":0,"trainingName":"1111","trainingContent":"111","inputType":1,"modifyDirection":1,"modifyContent":"1","programDelete":0}];
		    var options = {
                url: prefix + "/list",
                queryParams: queryParams,
                pagination: false,
		        showSearch: false,
                showRefresh: false,
                showToggle: false,
                showColumns: false,
                sidePagination: "client",
		        columns: [{
		            checkbox: true
		        },
                    {
                        field: 'index',
                        title: '编号',
                        align: 'center',
                        formatter: function (value, row, index) {
                            var columnIndex = $.common.sprintf("<input type='hidden' name='index' value='%s'>", $.table.serialNumber(index));
                            return columnIndex + $.table.serialNumber(index);
                        }
                    },

                    {
                        field: 'id',
                        title: '',
                        formatter: function (value, row, index) {
                            var html = $.common.sprintf("<input type='hidden' class='form-control' name='trainingProgramDTO[%s].id' value='%s'>", index, value);
                            return html;
                        }
                    },

                    {
                        field: 'trainingName',
                        title: '训练项目名称',
                        align: 'center',
                        formatter: function (value, row, index) {
                            var html = $.common.sprintf("<input class='form-control' type='text' name='trainingProgramDTO[%s].trainingName' value='%s' maxlength='20'>", index, value);
                            return html;
                        }
                    },
                    {
                        field: 'trainingContent',
                        title: '训练项目描述',
                        align: 'center',
                        formatter: function (value, row, index) {
                            var html = $.common.sprintf("<input class='form-control' type='text' name='trainingProgramDTO[%s].trainingContent' value='%s' maxlength='100'>", index, value);
                            return html;
                        }
                    },
                    {
                        field: 'inputType',
                        title: '输入类型',
                        align: 'center',
                        formatter: function (value, row, index) {
                            var data = [{index: index, toto: value}];
                            return $("#inputTypeTpl").tmpl(data).html();
                        }
                    },
                    {
                        field: 'modifyDirection',
                        title: '修改方向',
                        align: 'center',
                        formatter: function (value, row, index) {
                            var data = [{index: index, toto: value}];
                            return $("#modifyDirectionTpl").tmpl(data).html();
                        }
                    },
                    {
                        field: 'modifyContent',
                        title: '修改内容',
                        align: 'center',
                        formatter: function (value, row, index) {
                            var html = $.common.sprintf("<input class='form-control' type='text' name='trainingProgramDTO[%s].modifyContent' value='%s'>", index, value);
                            return html;
                        }
		        }]
		    };
		    $.table.init(options);
		});

        $(function () {
            // findEvaluateQuestion();
        });
        $(function () {
            setDicLable();
        });

        /* 主子表-提交 */
        function submitHandler(index, layero) {
            var data = $("#form-add").serializeArray();
            $.ajax({
                url: prefix+"/add",
                data: data,
                type: "post",
                success: function(result) {
                    if (result.code == 0) {
                        $.modal.alertSuccess("保存成功");
                        searchPre();
                        // layer.msg("保存成功,正在刷新数据请稍后……", {
                        //     icon: 1,
                        //     shade: [0.1, '#8F8F8F']
                        // },function() {
                        //     location.reload();
                        // });
                    } else {
                        $.modal.alertSuccess(result.msg);
                    }
                }
            })
        }
        function addColumn() {
            var row = {
                id: "",
                trainingName: "",
                trainingContent: "",
                inputType: "",
                modifyDirection: "",
                modifyContent: "",
            }
            sub.addColumn(row);
        }
        /*function addColumn() {
            var count = $("#" + table.options.id).bootstrapTable('getData').length;
            sub.editColumn();

            $("#" + table.options.id).bootstrapTable('insertRow', {
                index: count,
                row: {
                    index: $.table.serialNumber(count),
                    id: "",
                    questionName: "",
                    questionContent: "",
                    inputType: "",
                    modifyDirection: "",
                    questionReviseContent: "",
                }
            });
        }*/



        function searchPre() {
            var params = queryParams();
            $("#bootstrap-table").bootstrapTable('refresh', params);
        }

        function queryParams() {
            var search = {};
            var questionId = $("#questionId").val();
            var evaluateModuleType = $("#evaluateModuleType").val();
            var trainingScore = $('#trainingScore option:selected') .val();
            search.questionId = questionId;
            search.evaluateModuleType = evaluateModuleType;
            search.trainingScore = trainingScore;
            return search;
        }

        function setDicLable() {
            var projectModule = $("#projectModule").val();
            var projectModuleLable = getDicLabel(evaluateModuleType,projectModule);
            $("#projectModule").val(projectModuleLable);
        }

        function getDicLabel(datas,value) {
            var dicLabel = '';
            for(var i=0;i<datas.length;i++){
                if(datas[i].dictValue == value){
                    dicLabel = datas[i].dictLabel;
                    break;
                }
            }
            return dicLabel;
        }

        function findEvaluateQuestion() {
            var formData = new FormData();
            formData.set("evaluateType", $("#evaluateModuleType").val());
            $.ajax({
                url: ctx + 'business/tool/findEvaluateQuestion',
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                type: 'POST',
                success: function (result) {
                    if (result.code == web_status.SUCCESS) {
                        $("#evaluateQuestion").empty();    //清空
                        if (result.data != null) {
                            for (var i = 0; i < result.data.length; i++) {
                                $("#evaluateQuestion").append($("<option/>").text(result.data[i].dictLabel).attr("value", result.data[i].dictValue)); //动态添加标签
                            }
                        }
                    }
                }
            });
        }
    </script>
</body>
</html>

<!-- 输入类型 -->
<script id="inputTypeTpl" type="text/x-jquery-tmpl">
<div>
<select class='form-control' name='trainingProgramDTO[${index}].inputType'>
    <option value="">请选择</option>
    <option value="1" {{if toto=="1"}}selected{{/if}}>时间</option>
    <option value="2" {{if toto=="2"}}selected{{/if}}>距离</option>
    <option value="3" {{if toto=="3"}}selected{{/if}}>次数</option>
</select>
</div>


</script>


<!-- 修改方向 -->
<script id="modifyDirectionTpl" type="text/x-jquery-tmpl">
<div>
<select class='form-control' name='trainingProgramDTO[${index}].modifyDirection'>
    <option value="">请选择</option>
    <option value="1" {{if toto=="1"}}selected{{/if}}>增加</option>
    <option value="2" {{if toto=="2"}}selected{{/if}}>减少</option>
</select>
</div>


</script>